<template>
  <a-row :gutter="8">
    <a-col :span="16">
      <div class="form-container">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="formLayout.labelCol"
          :wrapper-col="formLayout.wrapperCol">
          <a-form-model-item label="姓名" prop="name">
            <a-input v-model="form.name" placeholder="请输入姓名"/>
          </a-form-model-item>
          <a-form-model-item label="年龄" prop="age">
            <a-input v-model="form.age" placeholder="请输入年龄"/>
          </a-form-model-item>
          <a-form-model-item label="出生日期" prop="birthday">
            <a-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="请选择日期"
              style="width: 100%;"
              valueFormat="YYYY-MM-DD"
            />
          </a-form-model-item>
          <a-form-model-item label="学历" prop="education">
            <a-select
              v-model="form.education"
              placeholder="请选择学历"
            >
              <a-select-option v-for="eduItem in educations"
                :key="eduItem.id"
                :value="eduItem.value">
                {{ eduItem.value }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="地址">
            <a-input v-model="form.address" placeholder="请输入地址"/>
          </a-form-model-item>
          <a-form-model-item label="是否锁定">
            <a-radio-group v-model="form.isLock">
              <a-radio :value="1">
                是
              </a-radio>
              <a-radio :value="0">
                否
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item
            :label-col="formTailLayout.labelCol"
            :wrapper-col="formTailLayout.wrapperCol">
            <a-checkbox :checked="ageValid" @change="handleChange">
              年龄是否必填
            </a-checkbox>
          </a-form-model-item>
          <a-form-model-item 
            :label-col="formTailLayout.labelCol"
            :wrapper-col="formTailLayout.wrapperCol">
            <a-button type="primary" @click="onSubmit">
              提交
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-col>
    <a-col :span="8">
      <a-card
        :bodyStyle="{ height: '700px', overflow: 'auto' }">
        <pre>{{ form }}</pre>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { educations } from '@/enum/enum-common'

export default {
  name: 'BaseFormModel',
  data() {
    return {
      formLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 8 }
      },
      formTailLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 8, offset: 4 }
      },
      ageValid: false,
      form: {
        'name': '',
        'age': '',
        'birthday': '',
        'education': undefined,
        'address': '',
        'isLock': 0,
        'score': '',
        'status': '',
        'createTime': ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        birthday: [
          { required: true, message: '请输入日期', trigger: 'change' },
        ],
        education: [
          { required: true, message: '请选择学历', trigger: 'change' },
        ],
        age: [
          { 
            required: false, 
            trigger: 'blur', 
            validator: (rule, value, callback) => {
              console.log("rule", rule)
              const { ageValid } = this
              this.rules[rule.field][0].required = ageValid 
              if (ageValid) {
                if (value) {
                  callback()
                } else {
                  callback(new Error('请输入年龄'))
                }
              } else {
                callback()
              }
            },
          }
        ]
      }
    }
  },
  computed: {
    educations () {
      return educations.map((item, index) => {
        return {
          id: index + 1,
          value: item
        }
      })
    },
    ruleForm () {
      return this.$refs.ruleForm
    }
  },
  methods: {
    onSubmit() {
      this.ruleForm.validate(valid => {
        if (valid) {
          this.$message.success('验证通过！');
        } else {
          this.$message.error('验证失败！');
          return false
        }
      });
    },
    handleChange(e) {
      this.ageValid = e.target.checked;
      this.$nextTick(() => {
        this.ruleForm.validateField('age')
      });
    },
    handleResetForm () {
      this.ruleForm.resetFields()
    }
  },
}
</script>

<style lang="scss" scoped>

</style>